<template>
    <div class="view-wrapper">
        <div class="listBox">
            <div class="listBox_head">
                <el-button type="primary" @click="innerVisibleOpen">添加神椰连锁总部</el-button>
            </div>
            <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
                @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
                <template v-slot:status="{ scope }">
                    <dict-tag :options="statusLs" :value="scope.row.status" />
                </template>
                <template v-slot:operate="{ scope }">
                    <el-button type="primary" @click="openChainData(scope.row)" size="small">连锁资料</el-button>
                    <el-button type="primary" @click="jumpMaintain(scope.row)" size="small">门店维护</el-button>
                    <el-button type="danger" @click="deleteView(scope.row)" size="small">删除</el-button>
                </template>
            </ex-table>
        </div>
        <el-dialog width="600px" title="添加神椰连锁总部" :visible.sync="innerVisible" append-to-body center
            :close-on-click-modal="false">
            <el-form :model="formInline" :rules="rules" ref="formInline" :label-width="labelWidth" class="demo-formInline">
                <el-form-item label="现有商户编号：" prop="id">
                    <el-input v-model="formInline.id" placeholder="请输入" :disabled="detailShow ? true : false"
                        :style="{ width: inputWidth }"></el-input>
                    <el-button type="primary" style="margin-left: 10px;" @click="searchMerchants('formInline')"
                        v-if="!detailShow">查询</el-button>
                    <el-button type="warning" style="margin-left: 10px;" v-if="detailShow" @click="requery">清空</el-button>
                </el-form-item>
                <template v-if="detailShow">
                    <el-form-item label="商户账号名称：" prop="">
                        <span>{{ detailInfo.merchantName == '' || detailInfo.merchantName == undefined ? '-' :
                            detailInfo.merchantName
                        }}</span>
                    </el-form-item>
                    <el-form-item label="店铺名称：" prop="">
                        <span>{{ detailInfo.shopName == '' || detailInfo.shopName == undefined ? '-' : detailInfo.shopName
                        }}</span>
                    </el-form-item>
                </template>
            </el-form>
            <div class="button_box" v-if="detailShow">
                <el-button @click="innerVisible = false" style="margin-right: 40px">取消</el-button>
                <el-button type="primary" @click="sumitAdd" :loading="bLoding">确认添加</el-button>
            </div>
        </el-dialog>
        <!-- 连锁资料弹窗 -->
        <ChainDataDialog ref="dialogRef"></ChainDataDialog>
    </div>
</template>
<script>
// components
import {
    chainList,
    merchantSearch,
    addMerchantChain,
    deleteMerchantChain,
} from "@/api/syChainManagement/syChainManagement.js";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
import ChainDataDialog from "./components/chainData";
export default {
    //   name: "",
    components: {
        ExportExcelButton,
        ChainDataDialog,
    },
    mixins: [handlePageMixin],
    data() {
        return {
            labelWidth: '120px',
            inputWidth: '280px',
            loading: false,
            bLoding: false,
            statusLs: [],//商户状态数组
            formInline: {
                id: "", //现有商户编号
            },
            rules: {
                id: [{
                    required: true,
                    message: '请输入现有商户编号',
                    trigger: ['change', 'blur']
                },
                {
                    validator: (rule, value, callback) => {
                        if (/^(?:[1-9]\d*)$/.test(value) == false) {
                            callback(new Error("请输入正确商户编号"));
                        } else {
                            callback();
                        }
                    },
                    trigger: ['change', 'blur']
                }],
            },
            detailShow: false,
            detailInfo: {},
            innerVisible: false,
            tableData: [],
            tableColumn: [
                { prop: "merchantId", label: "商户编号" },
                { prop: "merchantName", label: "商户账号名称" },
                { prop: "shopName", label: "店铺名称" },
                { prop: "account", label: "管理员账号" },
                { prop: "shopCount", label: "门店数量" },
                {
                    label: "商户状态",
                    slot: true,
                    slotName: "status",
                },
                {
                    label: "操作",
                    slot: true,
                    slotName: "operate",
                    width: "260",
                    fixed: "right",
                },
            ],
        };
    },
    created() {
        this.getDict();
        this.getList();
    },
    computed: {},
    methods: {
        // 添加连锁总部
        innerVisibleOpen() {
            this.innerVisible = true
            this.detailShow = false
            this.formInline = {
                id: ''
            }
            setTimeout(() => {
                this.$refs['formInline'].clearValidate('id')
            }, 1)
        },
        //获取字典
        getDict() {
            var dictType = "merchant_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.statusLs = res.result[0].dictList;
                })
                .finally(() => { });
        },
        //连锁资料
        openChainData(e) {
            this.$refs.dialogRef.open(e.id,e.merchantName);
        },
        // 门店维护
        jumpMaintain(e) {
            let id = e.id;
            let name = e.merchantName;
            this.$router.push({
                path: "/syChainManagement/storeMaintenance",
                query: { id: id, name: name },
            });
        },
        // 获取列表
        getList() {
            const params = {
                ...this.pageOptions,
            };
            this.loading = true;
            chainList(params)
                .then((res) => {
                    const { total, records } = res.result;
                    this.$refs.table.pageOptions.total = total;
                    this.tableData = records;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        //重新查询
        requery() {
            this.formInline.id = ''
            this.detailShow = false
        },
        // 查询商户
        searchMerchants(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    merchantSearch(this.formInline.id)
                        .then((res) => {
                            if (res.result != '') {
                                this.detailInfo = res.result
                                this.detailShow = true
                            }
                        })
                        .catch(() => {
                            this.detailShow = false
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //确认添加
        sumitAdd() {
            this.bLoding = true;
            console.log(this.formInline.account)
            var params = {
                merchantId: this.formInline.id
            };
            addMerchantChain(params)
                .then((res) => {
                    this.$message.success('添加成功');
                    setTimeout(() => {
                        this.getList()
                        this.innerVisible = false
                        this.bLoding = false;
                    }, 300)
                })
                .catch(() => {
                    this.bLoding = false;
                });
        },
        //删除
        deleteView(row) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteMerchantChain(row.id)
                    .then((res) => {
                        this.$message.success('删除成功');
                        setTimeout(() => {
                            this.getList()
                        }, 200)
                    })
                    .catch(() => {
                        this.bLoding = false;
                    });
            }).catch(() => { });
        },
    },
};
</script>
<style lang="scss">
.el-card-title {
    font-size: 20px;
}
</style>
<style lang="scss" scoped>
.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.el-form--inline .el-form-item {
    margin-right: 40px;
}

.form_box {
    ::v-deep .el-input {
        width: 300px !important;
    }
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
}

.list_search {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.table_list {
    display: flex;
    align-items: center;
    // border: 1px solid #DCDFE6;
    border-radius: 7px;
    width: 220px;
    margin-bottom: 10px;
}

.tableBox {
    width: calc(100% / 3);
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #303133;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-right: 0;
}

.tableBox:first-child {
    border-radius: 7px 0px 0px 7px;
}

.tableBox:last-child {
    border-right: 1px solid #dcdfe6;
    border-radius: 0px 7px 7px 0px;
}

.spchoosetext {
    background-color: #fff4e6;
    color: #ff9300;
    // border: 1px solid #ff9300;
}

.listBox_head {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.head ::v-deep.el-input-group__prepend {
    width: 110px !important;
}

.add_boxls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_box {
    width: 45%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
    height: 152px;
    cursor: pointer;
    background: #fdf6ec;
    border: 1px solid #f5dab1;
    color: #e6a23c;
}

.add_box2 {
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    color: #409eff;
}

.add_box:hover {
    opacity: 0.8;
}

.add_box img {
    width: 46px;
    height: 46px;
    margin-right: 12px;
}

.form_box {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.form_lable {
    width: 300px;
    text-align: right;
    font-size: 14px;
    color: #606266;
    margin-right: 15px;
}

.button_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
</style>
  